<script src="../../../api/modular/main/category/categoryExport.js"></script>
<template>
  <a-modal
    title="新增问卷"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="类型"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
                  <a-select size="small" style="width: 300px;" :defaultValue="formData.type" @change="handleContentWidthChange" v-decorator="['type', {rules: [{required: true, message: '请输入类型！'}]}]">
                    <a-select-option value="金融">金融</a-select-option>
                    <a-select-option value="学术">学术</a-select-option>
                    <a-select-option value="生活">生活</a-select-option>
                    <a-select-option value="科技">科技</a-select-option>
                    <a-select-option value="汽车">汽车</a-select-option>
                    <a-select-option value="时尚">时尚</a-select-option>
                    <a-select-option value="体育">体育</a-select-option>
                  </a-select>
          <!-- <a-input placeholder="请输入类型" v-decorator="['type', {rules: [{required: true, message: '请输入类型！'}]}]" /> -->
        </a-form-item>
        <a-form-item
          label="问卷列表名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入问卷列表名称" v-decorator="['name', {rules: [{required: true, message: '请输入问卷列表名称！'}]}]" />
        </a-form-item>
        <a-form-item
          label="是否为甄选问卷"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >

          <a-input placeholder="请输入是否为甄选问卷" v-decorator="['other', {rules: [{required: true, message: '请输入是否为甄选问卷！'}]}]" />
        </a-form-item>
               <a-form-item
          label="是否为甄选问卷"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
                  <a-select size="small" style="width: 300px;" :defaultValue="form.other" @change="handleContentWidthChange" v-decorator="['other', {rules: [{required: true, message: '请输入类型！'}]}]">
                    <a-select-option value="1">是</a-select-option>
                    <a-select-option value="0">否</a-select-option>
                  </a-select>
          <!-- <a-input placeholder="请输入类型" v-decorator="['type', {rules: [{required: true, message: '请输入类型！'}]}]" /> -->
        </a-form-item>
      </a-form>

      <div>
                <a-form-model :model="forms" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-model-item label="Activity name">
      <a-input v-model="forms.name" />
    </a-form-model-item>
    <a-form-model-item label="Activity zone">
      <a-select v-model="forms.region" placeholder="please select your zone">
        <a-select-option value="shanghai">
          Zone one
        </a-select-option>
        <a-select-option value="beijing">
          Zone two
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item label="Activity time">
      <a-date-picker
        v-model="forms.date1"
        show-time
        type="date"
        placeholder="Pick a date"
        style="width: 100%;"
      />
    </a-form-model-item>
    <a-form-model-item label="Instant delivery">
      <a-switch v-model="forms.delivery" />
    </a-form-model-item>
    <a-form-model-item label="Activity type">
      <a-checkbox-group v-model="forms.type">
        <a-checkbox value="1" name="type">
          Online
        </a-checkbox>
        <a-checkbox value="2" name="type">
          Promotion
        </a-checkbox>
        <a-checkbox value="3" name="type">
          Offline
        </a-checkbox>
      </a-checkbox-group>
    </a-form-model-item>
    <a-form-model-item label="Resources">
      <a-radio-group v-model="forms.resource">
        <a-radio value="1">
          Sponsor
        </a-radio>
        <a-radio value="2">
          Venue
        </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="Activity form">
      <a-input v-model="forms.desc" type="textarea" />
    </a-form-model-item>
    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">
        Create
      </a-button>
      <a-button style="margin-left: 10px;">
        Cancel
      </a-button>
    </a-form-model-item>
  </a-form-model>
      </div>

    </a-spin>
  </a-modal>
</template>

<script>
  import { questionnaireAdd } from '@/api/modular/main/questionnaire/questionnaireManage'

  export default {
    data () {
      return {
        labelCol: {
          xs: { span: 4 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 14 },
          sm: { span: 15 }
        },
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        formData:{
type:''
        },
      //    labelCol: { span: 4 },
      // wrapperCol: { span: 14 },
      forms: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      }
      }
    },
    methods: {
      created(){

        alert(1)
      },
       onSubmit() {
      console.log('submit!', this.forms);
    },
      // 初始化方法
      add (record) {


      },

      handleContentWidthChange(type){
        if(type){
  console.log(type,'1111111111111')
  console.log(this.formData)
        }
      },
      /**
       * 提交表单
       */
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            for (const key in values) {
              if (typeof (values[key]) === 'object') {
                values[key] = JSON.stringify(values[key])
              }
            }
            questionnaireAdd(values).then((res) => {
              if (res.success) {
                this.$message.success('新增成功')
                this.confirmLoading = false
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error('新增失败')// + res.message
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      },





    },

  }
</script>
